<!DOCTYPE html>
<!-- saved from url=(0084)https://tourbuy.uzai.com/booking/2019-12-23/TS1900951322/1286392/2/0/1/00015614.html -->
<html  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>填写订单-悦畅</title>

    <link href="/css/order/order.css" rel="stylesheet">
    <link href="/css/order/core.css" rel="stylesheet">
    <link href="./css/order/iconfont.css" rel="stylesheet">

    <link href="./css/order/WdatePicker.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .agl-hover {
            outline: 2px solid rgba(244, 67, 54, 0.99) !important;
            background-color: rgba(244, 67, 54, 0.2) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
        }

        .agl-highlight-current {
            outline: 2px solid rgba(255, 87, 34, 0.99) !important;
            background-color: rgba(255, 87, 34, 0.4) !important;
        }

        .agl-highlight-similar {
            outline: 2px dashed rgba(255, 87, 34, 0.99) !important;
            background-color: rgba(255, 87, 34, 0.4) !important;
        }

        .agl-highlight-group {
            outline: 4px double rgba(255, 87, 34, 0.99) !important;
            background-color: rgba(255, 87, 34, 0.4) !important;
        }

        .agl-cover-current {
            position: absolute !important;
            top: 0;
            left: 0;
            z-index: 9 !important;
            outline: 2px solid rgba(33, 33, 33, 0.99) !important;
            background-color: rgba(33, 33, 33, 0.6) !important;
        }

        .agl-cover-similar {
            position: absolute !important;
            top: 0;
            left: 0;
            z-index: 9 !important;
            outline: 2px dashed rgba(33, 33, 33, 0.99) !important;
            background-color: rgba(33, 33, 33, 0.6) !important;
        }

        .agl-cover-group {
            position: absolute !important;
            top: 0;
            left: 0;
            z-index: 9 !important;
            outline: 4px double rgba(33, 33, 33, 0.99) !important;
            background-color: rgba(33, 33, 33, 0.6) !important;
        }

        .agl-cover-focus {
            outline: 3px solid rgba(255, 165, 0, 0.99) !important;
            background-color: rgba(255, 165, 0, 0.4) !important;
        }
    </style>
</head>

<body style="background: rgb(247, 247, 247);">
<div class="top">
    <div class="wrap top_wrap">
        <div class="logo_pic_l">
            <a href="https://www.uzai.com/"><h2>悦畅旅游网</h2>                                              </a>
        </div>
        <div class="logo_pic_r"><em class="p_1  p_one curren_red"><span>01</span>填写信息并核对
        </em><em class="p_1 p_two"><span>02</span>在线支付
        </em><em class="p_1  p_three"><span>03</span>提交成功
        </em></div>
    </div>
</div>
<div class="wrap">
    <form id="order_form" action="/order/addOrder" class="reserve_l fl">
        <input id="adultPrice" value="2299.00" type="hidden">
        <input id="childPrice" value="" type="hidden"><input id="payType" value="二次确认" type="hidden">
        <input id="isTwPro" value="0" type="hidden">
        <div class="order_meg" >
            <h3 th:text="${title}"> &lt;【西安腔调】秦兵马俑+壶口瀑布+延安+唐华清宫+大雁塔+黄帝陵+轩辕庙+赠送华阴老腔 双卧6日12&gt; </h3>
            <div class="mesg_box">
                <p>
                    <i class=" iconfont icon-yuandian"></i>
                    <span class="col9">行程名称：</span>
                    <em th:text="${title}">
                    【西安腔调】秦兵马俑+壶口瀑布+延安+唐华清宫+大雁塔+黄帝陵+轩辕庙+赠送华阴老腔 双卧6日&lt;无购物&gt;
                    【商品编号：<span id="tuanNo" th:text="${r.id}">191105577</span>】
                    </em>
                </p>
                <p class="inlineblock"><i class=" iconfont icon-yuandian"></i><span class="col9">出发城市：</span><em th:text="${qidian}">北京</em></p>
                <p class="inlineblock"><i class=" iconfont icon-yuandian"></i><span class="col9">出发日期：</span><em id="goDate" th:text="${#dates.format(time,'yyyy-MM-dd HH:ss')}">2019-12-23</em></p>
                <p class="inlineblock"><i class=" iconfont icon-yuandian"></i><span class="col9">出行人数：</span><em id="adultNum" th:text="${peopleCount}">2</em>成人
                    <span id="child" style="display: none;">,<em id="childNum"></em>儿童</span></p>
            </div>
        </div>
        <input id="pice" th:value="${price}" type="hidden" name ="price">
        <input id="hun" th:value="${rbid}" type="hidden" name ="rbid">
        <input  id ="peopleCount" th:value="${peopleCount}" type="hidden" name = "peopleCount">
        <div class="order_nav">
            <h1>
                联系人信息
                <input id="hdUsePoint" value="0" type="hidden"></h1>
            <div class="order_pay_nav" id="auto_login">

                <div class="meg-person error">
                    <b class="letter3"><span>*</span>姓名</b>
                    <input type="text" name="Sp_name" id="contactName" placeholder="请输入姓名"class=" required" maxlength="25"
                           data-valid="isNonEmpty" data-error=""
                           avalon-events="input:_6,compositionstart:_4,compositionend:_5,focus:_2,blur:_3">
                    <span class="valid_message" id = "boolName" style="display: none"></span>
                </div>

                <div class="meg-person tel">
                    <b class="letter2"><span>*</span>手机号码</b>
                    <input type="hidden" id="hdPhone" value=""><input type="hidden" id="hdName" value="">
                    <input type="hidden" id="hdEmail" value="">
                    <input id="phone" name="Sp_phone" placeholder="请输入手机号码" maxlength="11"
                           type="text" class=" required"
                           avalon-events="input:_6,compositionstart:_4,compositionend:_5,focus:_2,blur:_3">
                    <span class="valid_message" id = "boolPhone"></span>
                    <div class="hide_tips_box"><i class="iconfont icon-question"></i>
                        <div class="bubble">
                            <p>此手机号为接收短信所用，作为订购与取票凭证，请准确填写。</p><span></span></div>
                    </div>
                </div>

                <div class="meg-person">
                    <b class="letter3">邮箱</b>
                    <input name="Sp_email" placeholder="请输入邮箱" type="text"
                           id="contactEmail" maxlength="50"
                           class="add_required" data-valid="isEmail"
                           data-error="邮箱格式错误"
                           avalon-events="input:_6,compositionstart:_4,compositionend:_5,focus:_2,blur:_3">
                    <span class="valid_message" id ="boolEmail"></span>
                </div>

                <div class="meg-person">
                    <b class="letter3">备注</b>
                    <textarea name="Remark" placeholder="请备注您对产品的其他要求"
                              id="remark" cols="30" rows="10"
                              maxlength="200"></textarea>
                </div>

            </div>
        </div>
        <div class="order_nav">
            <h1>
                出游人信息
                <span>为了更好的帮您完成行程预订，建议您可以填写出游人或稍后在“我的悠哉-我的订单”中补充出游人信息</span></h1>
            <div class="order_pay_nav">
                <div class="people_list">

                    <div class="people_masg" data-type="adult" data-sort="0" tid="0" th:each="i:${#numbers.sequence(1, peopleCount)}">
                        <h2 class="visitor">
                            <b><span class="span1">出游人<i th:text="i"></i></span><span class="span2">成人</span>
                            </b><em class="clearall" cid="0"><i class="iconfont icon-qingkong"></i>清空</em>
                            <span class="travel_user fr"><i class="iconfont icon-checkbank"></i> 存为常用联系人</span>
                        </h2>
                        <div class="meg-person">
                            <b class="letter3"><span>*</span>姓名</b>
                            <input id="tname" placeholder="请输入姓名" name="tname" type="text" class="required" maxlength="25"
                                   data-valid="isNonEmpty" data-error="姓名不能为空"
                                   avalon-events="input:_6,compositionstart:_4,compositionend:_5,focus:_2,blur:_3">
                            <span class="valid_message" id ="boolPeopleName"></span>
                        </div>

                        <div class="meg-person tel">
                            <b class="letter2">手机号码</b>
                            <input id="tphone" placeholder="请输入11位手机号码" name="tphone" maxlength="11" type="text"
                                   class="add_required" data-valid="isMobile" data-error="手机格式不正确"
                                   avalon-events="input:_6,compositionstart:_4,compositionend:_5,focus:_2,blur:_3">
                            <span class="valid_message" id ="boolPhone1"></span>
                        </div>
                        <div class="meg-person" data-sort="0">
                            <b class="letter2">身份证号</b>
                            <input id="tcard" placeholder="请输入证件号码" name="tcard" maxlength="20" type="text" class="add_required">
                            <span class="valid_message" id ="boolCard"></span>
                        </div>

                        <div class="meg-person">
                            <b class="letter3">
                                <span>*</span>性别
                            </b>
                            <input type="radio" value="男" name="sex" checked="checked"/>男
                            <input type="radio" value="女" name="sex"/>女
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="order_nav">


        <div class="back_wrap">
            <a href="javascript:history.go(-1)" class="pay_tips pay_co">
                &lt; 返回上一步
            </a>
        </div>
        <div class="order_submit_nav clear">
            <div class="pay_tips">
                <i class="iconfont icon-xuanzhong agree"></i>我已阅读并知悉以下旅游合同、费用包含、预定须知、温馨提示、自费项目等所有相关内容,同意签署下列旅游合同。
            </div>

            <div class="go_pay" id="order_submit_go_pay" >
                提交订单
            </div>
        </div>


        <div class="order_nav order_nav_ht">

            <div class="text_content">


            </div>
        </div>

    </form>

    <div class="reserve_r" style="position: fixed; top: 0px;margin-top: 125px" >
        <h1><i class="iconfont icon-icon"></i>费用明细
        </h1>
        <h2><span class="title">旅游团费</span><span class="price" th:text="${price}">¥4598</span></h2>
        <p><span><em th:text="${peopleCount}"></em>成人&nbsp;x&nbsp;¥<em th:text="${price}"></em></span>
            <span class="fr" th:text="${price}">¥4598</span>
        </p>
        <div>
            总计
            <em>¥</em><span id="sum_price" th:text="${price}" >4998</span>
        </div>
    </div>
</div>
<!-- mask为半透明遮罩层 -->
<div id="loader">
    <div><img src="./img/order/ajaxloading.gif" alt=""></div>
    <div class="boxContent">自动登入中...</div>
</div>



<script src="/houtaistatic/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function () {
        //提交键
        $("#order_submit_go_pay").click(function (){
            $("#order_form").submit();
        });

        //联系人非空判断
        $("#contactName").blur(function ({}) {
            var name = $(this).val();

            if(name==null || name==""){
                $("#boolName").show();
                $("#boolName").html("姓名不能为空！");
            }else{
                $("#boolName").html("√");
            }
        });
        
       $("#phone").blur(function ({}) {
           var phone = $(this).val();
           var $phone = /^1\d{10}$/;
           if(phone==null || phone=="") {
               $("#boolPhone").show();
               $("#boolPhone").html("联系电话不能为空！");
           }else if($phone.test(phone) == false){
               $("#boolPhone").html("电话格式不正确！");
           }else{
               $("#boolPhone").html("√");
           }
       });

       $("#contactEmail").blur(function ({}) {
           var email = $(this).val();
           var $email = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/;
           if(email==null || email=="") {
               $("#boolEmail").show();
               $("#boolEmail").html("邮箱不能为空！");
           }else if($email.test(email) == false){
               $("#boolEmail").html("邮箱格式不正确！");
           }else{
               $("#boolEmail").html("√");
           }
       });


        //游客非空判断
       $("#tname").blur(function ({}) {
           var peopleName = $(this).val();
           if(peopleName==null || peopleName==""){
               $("#boolPeopleName").show();
               $("#boolPeopleName").html("姓名不能为空！");
           }else{
               $("#boolPeopleName").html("√");
           }
       });


        $("#tphone").blur(function ({}) {
            var tphone = $(this).val();
            var $phone = /^1\d{10}$/;
            if(tphone==null || tphone=="") {
                $("#boolPhone1").show();
                $("#boolPhone1").html("联系电话不能为空！");
            }else if($phone.test(tphone) == false){
                $("#boolPhone1").html("电话格式不正确！");
            }else{
                $("#boolPhone1").html("√");
            }
        });

        $("#tcard").blur(function ({}) {
            var tcard = $(this).val();
            alert(tcard);
            var $card15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/;
            var $card18 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
            if(tcard==null || tcard=="") {
                $("#boolCard").show();
                $("#boolCard").html("身份证号不能为空！");
            }else if($card15.test(tcard) == false) {
                $("#boolCard").html("身份证号格式不正确！");
            }else if($($card18.test(tcard) == false)){
                $("#boolCard").html("身份证号格式不正确！");
            }else{
                $("#boolCard").html("√");
            }
        });
        
    });
</script>

<script type="text/javascript" async="" src="./js/order/analytics.js"></script>
<script src="./js/order/309724.js" defer="" async=""></script>
<script type="text/javascript" async="" src="./js/order/fcagl.js"></script>
<script src="./js/order/js"></script>
<script src="./js/order/hm.js"></script>
<script type="text/javascript" src="./js/order/avalon.js"></script>
<script type="text/javascript" src="./js/order/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/order/core.js"></script>
<script type="text/javascript" src="./js/order/wdatepicker.js"></script>
<script type="text/javascript" src="./js/orderjquery.baidumap.min.js"></script>
<script type="text/javascript" src="./js/order/order_map.js"></script>
<script type="text/javascript" src="./js/order/validate.js"></script>
<script type="text/javascript" src="./js/order/try_form.js"></script>
<script type="text/javascript" src="./js/order/order.js"></script>
<script type="text/javascript" src="./js/order/preferential.js"></script>
<script type="text/javascript" src="./js/order/statistics.js"></script>
<script type="text/javascript" src="./js/order/api"></script>
<script type="text/javascript" src="./js/order/getscript"></script>
<iframe name="196944" height="0" width="0" src="./dindan/mediav.html" style="display: none;"></iframe>
<iframe name="196944" height="0" width="0" src="./dindan/proxy.html" style="display: none;"></iframe>
</body>

</html>